<template>
  <div>
    <div class="title">热销推荐</div>
    <div>
      <ul>
        <li
          class="wrap"
          v-for="item of recommendList"
          :key="item.id"
          @click="goDetail(item.id)"
        >
          <div class="imgBox">
            <img :src="item.url" alt="" />
          </div>
          <div class="descBox">
            <p class="theme" v-text="item.theme"></p>
            <p class="desc" v-text="item.desc"></p>
            <p class="priceBox">
              <span class="price" v-text="item.price"></span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: {
      type: [Array],
      required: true
    }
  },
  methods: {
    goDetail: function (id) {
      this.$router.push({ path: `/detail/${id}` })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@styles/mixins.styl';

.title{
  line-height 0.8rem
  background #eee
  text-indent .2rem
}
.wrap{
  overflow hidden
  line-height 0.4rem
  padding 0.25rem 0 0.25rem 0.25rem
  border-bottom 1px solid #eee
  .imgBox{
    float left
    width 1.2rem
    height 1.2rem
    img{
      width 100%
      height 100%
      border-radius .133333rem
    }
  }
  .descBox{
    margin-left 1.5rem
    height 100%
    letter-spacing 0.5px
    .theme{
      font-weight bold
      ellipsis()
    }
    .desc{
      font-size 0.25em
      color #bbb
      ellipsis()
    }
    .priceBox{
      padding-left 0.2rem
      font-size 0.25em
      position: relative
        &:before {
          content '¥'
          font-size 0.25em
          position absolute
          position absolute
          left 0
          bottom 0.1rem
          color orange
        }
        &:after {
          content '起'
          font-size 0.25em
          position absolute
          bottom 0.1rem
          color #ccc
          margin-left 0.05rem
        }
        .price{
          color orange
          font-size 0.38rem
          display inline-block
          ellipsis()
        }
    }
  }
}
</style>
